<template>
  <div class="card-container">
        <div class="card-top">
            <p>小组学习</p>
             <i class="el-icon-more"></i>
        </div>
        <div class="card-mid">
            <p>点击寻找更多热爱学习的小柠檬，互相监督学习吧</p>
        </div>
        <div class="card-bot">
            <img src="../../../../assets/team.png" alt="">
            <el-button icon="el-icon-right"></el-button>
        </div>
      </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.card-container{
    width:15vw;
    margin-top:3vh;
    margin-left:1vh;
    margin-bottom: 3vh;
    height:40vh;
    padding:1vw 1vw 0vw 1vw;
    display: flex;
    flex-direction: column;
    background-color: #FAFDF4;
    justify-content: space-evenly;
    border-radius: 16px;
    animation: fade-in;/*动画名称*/
    animation-duration: 0.5s;/*动画持续时间*/
    -webkit-animation:fade-in 0.5s;/*针对webkit内核*/
     -moz-box-shadow: 1px 1px 5px #D5EDA1;/*firefox*/
    -webkit-box-shadow: 1px 1px 5px #D5EDA1;/*safari或chrome*/
    box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.25);
    .card-top{
        display:flex;
        justify-content: space-between;
        p{
            font-size:26px;
            margin:0;
            margin-left:1vw;
        }
        .el-icon-more{
          transform: rotate(90deg);
          color:#6B7178;
          margin-right:1vw;
        }
    }
     .card-mid{
      padding:2vh 1vw 2vh 1vw;
      font-size: 14px;
      line-height:20px;
      color: rgba(102, 113, 128, 1);
     }
     .card-bot{
      display:flex;
       align-items: flex-end;
        justify-content: space-around;
      .el-button{
        background-color:#A5D63F;
        height:3vw;
        border-radius: 12.5px;
        .el-icon-right{
          font-size:20px;
        }
        }
     }
}
.card-container:hover{
     box-shadow: inset -6px -6px 10px #c78534,
                 inset 6px 6px 20px rgba(0, 0, 0, 0.05);
     transform: scale(0.95);
    cursor: url('https://pic1.imgdb.cn/item/633e7c9d16f2c2beb19e9633.png'),pointer;
     transition: all 0.2s linear;
     -moz-box-shadow: 1px 1px 5px #D5EDA1;/*firefox*/
     -webkit-box-shadow: 1px 1px 5px #D5EDA1;/*safari或chrome*/
     box-shadow:1px 1px 5px #D5EDA1;/*opera或ie9*/
     background-color:#EAFFBD;
     color:#0D8078;
  }
</style>
